import { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { ToolboxComponent } from 'echarts/components';
import { CustomChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart, ToolboxComponent, CustomChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        let name = ['心内科', '烧伤科', '骨科', '耳鼻喉科', '呼吸科', '肠胃科'];
        let value = [78, 88, 128, 159, 34, 28];
        const offsetX = 16;
        const offsetY = 8;
        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint;
                const c0 = [shape.x, shape.y];
                const c1 = [shape.x - offsetX, shape.y - offsetY];
                const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                const c3 = [xAxisPoint[0], xAxisPoint[1]];
                ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
            },
        });
        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint;
                const c1 = [shape.x, shape.y];
                const c2 = [xAxisPoint[0], xAxisPoint[1]];
                const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                const c4 = [shape.x + offsetX, shape.y - offsetY];
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
            },
        });
        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const c1 = [shape.x, shape.y];
                const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                const c3 = [shape.x, shape.y - offsetX];
                const c4 = [shape.x - offsetX, shape.y - offsetY];
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
            },
        });
        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft);
        echarts.graphic.registerShape('CubeRight', CubeRight);
        echarts.graphic.registerShape('CubeTop', CubeTop);
        // 主体
        const option = {
            backgroundColor: "#03171f",
            toolbox: {
                show: true,
                orient: "vertical",
                left: "right",
                top: "top",
                feature: {
                    saveAsImage: { show: true },  // 保存图表
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                formatter: function (params) {
                    const item = params[1];
                    return `${item.name}:${item.value}`;
                },
            },
            grid: {
                // width: "95%",
                // height: "95%",
                top: "8%",
                left: "5%",
                right: "5%",
                bottom: "5%",
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: name,
                // X
                axisLine: {
                    show: true,
                    lineStyle: {
                        // width: 1,
                        color: '#2B7BD6',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    fontSize: 14,
                    interval: 0,
                },
            },
            yAxis: {
                type: 'value',
                // y
                axisLine: {
                    show: true,
                    lineStyle: {
                        // width: 1,
                        color: '#2B7BD6',
                    },
                },
                splitLine: {
                    show: true,
                    // y-line
                    lineStyle: {
                        // width: 1,
                        type: 'dashed',
                        color: '#153D7D',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    fontSize: 14,
                },
                // boundaryGap: ['20%', '20%'],
            },
            series: [
                // 柱体
                {
                    name: '',
                    type: 'custom',
                    renderItem: (params, api) => {
                        const location = api.coord([api.value(0), api.value(1)]);
                        return {
                            type: 'group',
                            children: [
                                {
                                    type: 'CubeLeft',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0]),
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#33BCEB',
                                            },
                                            {
                                                offset: 1,
                                                color: '#337CEB',
                                            },
                                        ]),
                                    },
                                },
                                {
                                    type: 'CubeRight',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0]),
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#28A2CE',
                                            },
                                            {
                                                offset: 1,
                                                color: '#1A57B7',
                                            },
                                        ]),
                                    },
                                },
                                {
                                    type: 'CubeTop',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0]),
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#43C4F1',
                                            },
                                            {
                                                offset: 1,
                                                color: '#28A2CE',
                                            },
                                        ]),
                                    },
                                },
                            ],
                        };
                    },
                    data: value,
                },
                // bar顶部数量
                {
                    name: '',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: (e) => {
                                return `${e.value}`;
                            },
                            fontSize: 16,
                            color: '#43C4F1',
                            offset: [0, -15],
                        },
                    },
                    itemStyle: {
                        color: 'transparent',
                    },
                    tooltip: {},
                    data: value,
                },
            ],
        };

        chart.setOption(option);

        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '22vw', height: '13vw', maxWidth: '22vw', maxHeight: '13vw' }}></div>;
};

export default EChartsComponent;

